<template>
  <div class="TopBar" style="height: 100%; user-select: none">
    <el-menu
      router
      :default-active="router.currentRoute.value.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#191D24"
      text-color="#A6ADBA"
      active-text-color="#A6ADBA"
      style="height: 100%; font-weight: 50"
    >
      <img
        src="../assets/new1.svg"
        style="
          width: 170px;
          height: 100%;
          margin-right: 2.5vh;
          margin-left: 2.5vh;
          /* margin-top: 0.3vh; */
          cursor: pointer;
        "
        @click="router.push('/')"
      />
      <el-menu-item index="/" @click="router.push('/')"
        ><el-icon><House /></el-icon>首页
      </el-menu-item>
      <el-menu-item index="/Chat" @click="router.push('/Chat')"
        ><el-icon><ChatSquare /></el-icon>心语解惑 </el-menu-item
      ><el-menu-item
        index="/Draw"
        style="margin-left: 2vh"
        @click="router.push('/Draw')"
        ><el-icon><Picture /></el-icon>心语成画</el-menu-item
      >
      <!-- <el-menu-item
        index="/Test"
        style="margin-left: 2vh"
        @click="router.push('/Test')"
        ><el-icon><Picture /></el-icon>心语成画</el-menu-item
      > -->
      <!-- <el-sub-menu index="2" style="margin-left: 2vh" class="sub">
        <template #title>
          <el-icon><location /></el-icon><span>Link</span></template
        >
        <el-menu-item index="" key="https://www.bilibili.com/"
          ><a href="https://www.bilibili.com/" target="_blank" class="link"
            >bilibili</a
          ></el-menu-item
        >
        <el-menu-item index="" key="https://github.com/"
          ><a href="https://github.com/" target="_blank" class="link"
            >github</a
          ></el-menu-item
        >
      </el-sub-menu> -->
    </el-menu>
  </div>
</template>

<script lang="ts" setup name="TopBar">
import { defineComponent, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const activeIndex2 = ref("0");
type Props = {
  info: string; //字符串类型的数据
};
withDefaults(defineProps<Props>(), {
  //withDefaults可以指定默认值
  info: "文心成画", //可以直接指定
});
onMounted(() => {
  console.log(router.currentRoute.value.path);
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@font-face {
  font-family: "Zhu";
  src: url("../assets/fonts/MaokenZhuyuanTi.ttf");
}
.TopBar {
  font-family: "Zhu", SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
    Courier New, monospace;
  font-weight: 600;
  font-size: 1.2rem;
}
.el-menu--horizontal {
  border-bottom: none;
}
.el-menu-item {
  font-size: 1.13rem;
}
:deep(.el-sub-menu__title) {
  font-size: 1.13rem;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #caa974;
  color: #caa974 !important;
}
.link {
  text-decoration: none;
  color: #a6adba;
}
</style>
